import React, { useState } from 'react';
import { Button, Card, Space, Typography, message } from 'antd';
import { ExperimentOutlined, EditOutlined } from '@ant-design/icons';
import GraphEditModal from './GraphEditModal';
import LayoutLab from './LayoutLab';

const { Title, Text } = Typography;

// 示例：如何使用重构后的图谱编辑模式
const LayoutLabExample = () => {
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [layoutLabVisible, setLayoutLabVisible] = useState(false);
  
  // 示例图谱数据
  const [sampleGraphData, setSampleGraphData] = useState({
    id: 'sample_graph',
    name: '示例知识图谱',
    type: 'knowledge',
    layout: 'force',
    nodes: [
      { id: 'node1', label: '人工智能', type: 'concept', x: 100, y: 100 },
      { id: 'node2', label: '机器学习', type: 'concept', x: 200, y: 150 },
      { id: 'node3', label: '深度学习', type: 'concept', x: 300, y: 100 },
      { id: 'node4', label: '神经网络', type: 'concept', x: 250, y: 200 },
      { id: 'node5', label: '自然语言处理', type: 'application', x: 150, y: 250 }
    ],
    edges: [
      { id: 'edge1', source: 'node1', target: 'node2', label: '包含' },
      { id: 'edge2', source: 'node2', target: 'node3', label: '包含' },
      { id: 'edge3', source: 'node3', target: 'node4', label: '基于' },
      { id: 'edge4', source: 'node2', target: 'node5', label: '应用于' }
    ],
    entities: 5,
    relations: 4
  });

  // 图谱类型定义
  const graphTypeDefinitions = {
    knowledge: {
      name: '知识图谱',
      icon: '🧠',
      nodeTypes: ['概念', '实体', '属性'],
      relationTypes: ['包含', '属于', '关联', '依赖']
    },
    concept: {
      name: '概念图谱',
      icon: '💡',
      nodeTypes: ['核心概念', '子概念', '实例'],
      relationTypes: ['是一种', '包含', '相关']
    }
  };

  // 处理图谱保存
  const handleSaveGraph = (updatedGraphData) => {
    setSampleGraphData(updatedGraphData);
    message.success('图谱已保存');
    setEditModalVisible(false);
  };

  // 处理布局实验室应用布局
  const handleApplyLayoutFromLab = (layoutResult) => {
    const updatedData = {
      ...sampleGraphData,
      layout: layoutResult.layout,
      nodes: layoutResult.nodes || sampleGraphData.nodes,
      edges: layoutResult.edges || sampleGraphData.edges
    };
    setSampleGraphData(updatedData);
    message.success(`已应用${layoutResult.layout}布局`);
    setLayoutLabVisible(false);
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card>
        <Title level={3}>
          <ExperimentOutlined style={{ marginRight: 8 }} />
          布局实验室演示
        </Title>
        <Text type="secondary" style={{ display: 'block', marginBottom: 24 }}>
          展示专注布局玩法的图谱编辑模式，让用户能自由探索布局效果，不被业务类型干扰
        </Text>

        <Space size="large">
          <Button 
            type="primary" 
            icon={<EditOutlined />}
            onClick={() => setEditModalVisible(true)}
          >
            传统编辑模式
          </Button>
          
          <Button 
            type="primary" 
            icon={<ExperimentOutlined />}
            onClick={() => setLayoutLabVisible(true)}
            style={{ background: '#722ed1', borderColor: '#722ed1' }}
          >
            布局实验室模式
          </Button>
        </Space>

        <div style={{ marginTop: 24 }}>
          <Title level={4}>核心特性对比</Title>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
            <Card size="small" title="传统编辑模式">
              <ul style={{ paddingLeft: 16, margin: 0 }}>
                <li>业务类型绑定布局选择</li>
                <li>节点和关系编辑为主</li>
                <li>布局作为配置选项</li>
                <li>适合具体业务场景</li>
              </ul>
            </Card>
            
            <Card size="small" title="布局实验室模式" style={{ borderColor: '#722ed1' }}>
              <ul style={{ paddingLeft: 16, margin: 0 }}>
                <li>🎯 <strong>去除业务绑定</strong> - 所有布局算法开放选择</li>
                <li>🔧 <strong>参数实时调试</strong> - 边调边看布局变化</li>
                <li>🎲 <strong>虚拟数据沙盒</strong> - 纯玩布局效果</li>
                <li>📊 <strong>布局对比模式</strong> - 同数据多布局PK</li>
                <li>💾 <strong>快照收藏</strong> - 保存喜欢的布局方案</li>
              </ul>
            </Card>
          </div>
        </div>

        <div style={{ marginTop: 24 }}>
          <Title level={4}>当前图谱信息</Title>
          <Space>
            <Text>名称: {sampleGraphData.name}</Text>
            <Text>类型: {sampleGraphData.type}</Text>
            <Text>布局: {sampleGraphData.layout}</Text>
            <Text>节点: {sampleGraphData.nodes.length}</Text>
            <Text>关系: {sampleGraphData.edges.length}</Text>
          </Space>
        </div>
      </Card>

      {/* 传统编辑模式 */}
      <GraphEditModal
        visible={editModalVisible}
        onCancel={() => setEditModalVisible(false)}
        graphData={sampleGraphData}
        onSave={handleSaveGraph}
        graphTypeDefinitions={graphTypeDefinitions}
      />

      {/* 布局实验室模式 */}
      <LayoutLab
        visible={layoutLabVisible}
        onCancel={() => setLayoutLabVisible(false)}
        initialData={{
          nodes: sampleGraphData.nodes,
          edges: sampleGraphData.edges
        }}
        onApplyLayout={handleApplyLayoutFromLab}
      />
    </div>
  );
};

export default LayoutLabExample;
